<template>
  <el-dialog :visible="visible" title="打卡范围设置" fullscreen @close="onCloseDialog">
    <el-row class="el-row-map">
      <el-col :span="16" style="height: 100%">
        <!-- 地图 -->
        <div id="map-container">
          <!-- 地图容器 -->
        </div>
      </el-col>
      <el-col class="operation-container" :span="6" :offset="1">
        <!-- 打卡地点选择框 -->
        <el-table
          v-if="companyList.length"
          :data="companyList"
          :show-header="false"
          border
          stripe
          height="100%"
          highlight-current-row
          :cell-class-name="tableCellClassName"
          @current-change="onChangeCompany"
        >
          <el-table-column prop="name" />
        </el-table>
        <!-- 打卡半径滑动选择组件 -->
        <div v-if="currentCompany.radius">
          <p>打卡半径：</p>
          <el-slider
            v-model="currentCompany.radius"
            :min="10"
            :max="1000"
            :format-tooltip="formatTooltip"
            @input="onRadiusChange"
          />
        </div>
      </el-col>
    </el-row>
    <!-- 底部操作按钮 -->
    <el-row type="flex" justify="end" style="margin-right: 60px;">
      <el-button size="medium" @click="onCloseDialog">取消</el-button>
      <el-button type="primary" size="medium" @click="onSave">批量保存</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { getCompanyListAPI, updateCompanyListAPI } from '@/api/map'

export default {
  name: 'RangeEditor',
  data() {
    return {
      visible: false, // 控制弹窗显示隐藏
      companyList: [], // 公司列表
      currentCompany: {}// 当前选中的公司
    }
  },
  methods: {
    // 打开弹窗
    async open() {
      this.visible = true
      // 获取公司列表
      await this.getCompanyList()
      // 初始化地图
      this.$nextTick(async() => {
        await this.initAMap()
      })
    },
    // 获取公司列表
    async getCompanyList() {
      this.companyList = await getCompanyListAPI()
      // 默认选中第一个公司
      this.currentCompany = this.companyList[0]
    },
    // 格式化滑动条的提示信息
    formatTooltip(value) {
      return (value === 1000 ? '1.00公里' : `${value}米`) + '内可打卡'
    },
    // 给选中的公司添加高亮类
    tableCellClassName({ row }) {
      if (row.id === this.currentCompany?.id) {
        return 'checked-cell'
      }
    },
    // 初识化地图
    initAMap() {
      const firstLng = 116.34351300000004
      const firstLat = 40.060244
      const firstRadius = 500
      const firstText = ''

      window._AMapSecurityConfig = {
        securityJsCode: '039b9f7d9d5e2b96c4214610ada7704a'
      }
      AMapLoader.load({
        key: 'f59406a602229d06358419c9f5f5a75c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale'] // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          // 配置地图
          this.map = new AMap.Map('map-container', {
            center: [firstLng, firstLat], // 地图中心点
            viewMode: '2D', // 地图模式
            zoom: 16 // 地图级别
          })
          // 添加点标记
          this.marker = new AMap.Marker({
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            position: [firstLng, firstLat],
            anchor: 'bottom-center'
          })
          // 添加圆形覆盖物
          this.circle = new AMap.Circle({
            center: new AMap.LngLat(firstLng, firstLat), // 圆心
            radius: firstRadius, // 半径
            borderWeight: 1, // 描边的宽度
            strokeColor: '#FF33FF', // 轮廓线颜色
            strokeOpacity: 1, // 轮廓线透明度
            strokeWeight: 1, // 轮廓线宽度
            fillOpacity: 0.4, // 圆形填充透明度
            strokeStyle: 'solid', // 轮廓线样式
            strokeDasharray: [10, 10],
            fillColor: '#1791fc', // 圆形填充颜色
            zIndex: 50 // 圆形的叠加顺序
          })
          // 添加文本标记
          this.text = new AMap.Text({
            text: firstText, // 标记显示的文本内容
            anchor: 'center', // 设置文本标记锚点位置
            style: {
              // 设置文本样式，Object 同 css 样式表
              'padding': '.75rem 1.25rem',
              'margin-bottom': '1rem',
              'border-radius': '.25rem',
              'background-color': 'white',
              'width': '15rem',
              'border-width': 0,
              'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
              'text-align': 'center',
              'font-size': '20px',
              'color': 'blue'
            },
            position: [firstLng, firstLat], // 点标记在地图上显示的位置
            offset: [0, 50]
          })
          // 添加点标记 Marker 对象到 Map
          this.map.add(this.marker)
          // 圆形 Circle 对象添加到 Map
          this.map.add(this.circle)
          // 文本标记 Text 对象添加到 Map
          this.map.add(this.text)
          // 更新地图
          this.updateMap()
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 切换公司
    onChangeCompany(currentRow) {
      // 获取当前选中的公司的坐标
      this.currentCompany = currentRow
      // 更新地图
      this.updateMap()
    },
    // 更新地图
    updateMap() {
      const lng = this.currentCompany.point[0]
      const lat = this.currentCompany.point[1]
      const radius = this.currentCompany.radius
      const text = (radius === 1000 ? '1.00公里' : `${radius}米`) + '内可打卡'
      // 更新地图的中心点
      this.map.setCenter([lng, lat])
      // 更新点标记的位置
      this.marker.setPosition([lng, lat])
      // 更新圆形覆盖物的位置
      this.circle.setCenter(new window.AMap.LngLat(lng, lat))
      // 更新圆形覆盖物的半径
      this.circle.setRadius(radius)
      // 更新文本标记的位置
      this.text.setPosition([lng, lat])
      // 更新文本标记的内容
      this.text.setText(text)
    },
    // 监听打卡半径变化
    onRadiusChange(radius) {
      if (this.circle && this.text) {
        // 更新圆形覆盖物的半径
        this.circle.setRadius(radius)
        // 更新文本标记的内容
        this.text.setText((radius === 1000 ? '1.00公里' : `${radius}米`) + '内可打卡')
      }
    },
    // 批量保存修改
    async onSave() {
      // 发送修改公司列表请求
      await updateCompanyListAPI(this.companyList)
      // 弹出消息
      this.$message.success('保存成功')
      // 销毁地图，关闭弹窗，重置数据
      this.onCloseDialog()
    },
    // 销毁地图，关闭弹窗，重置数据
    onCloseDialog() {
      if (this.map) {
      // 销毁地图
        this.map.destroy()
        this.map = null
      }
      this.visible = false
      this.currentCompany = {}
      this.companyList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row-map {
  height: 80vh;
  margin-left: 40px;
  margin-bottom: 40px;
  .operation-container {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .el-table {
      width: 100%;
      margin-bottom: 40px;
      ::v-deep .checked-cell {
        background-color: rgb(17, 84, 255) !important;
        color: #FFF;
      }
    }
  }
}
#map-container {
  width: 100%;
  height: 100%;
  border: 1px #ccc solid;
}
</style>
